<!DOCTYPE html>
<html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Dance Match</title>
        <link rel="stylesheet" href="stylesheets/reset.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" charset="utf-8" />
        <script language="JavaScript" src="scripts/dynamicDropdown.js"></script>

    </head>
    <body>
        <section id="container">
            <header>
                <h1><a href="index.html">DANCE MATCH</a></h1>
            </header>
                <nav>
                    <ul>
                        <li><a href="index.html">Start</a></li>
                        <li><a href="solo.html">Registration Form</a></li>
                        <li><a href="preferences.html" class="selected">Preference Rankings</a></li>
                    </ul>
                </nav>
            <section id="content">
                <article>
                    <h2></h2>
                    <p>Fill this out!</p>
                    <form>
                    <fieldset>
                    <legend>Who are you?</legend>
                        <div class="item"><span>Carleton username:</span> <input type="text" name="carletonUsername"/></div>
                    <div class="item"><span>I'm a..</span>
                        <select id="positionType" onchange="displayRankings('positionType','leadList','followList')">
                        
                            <option value=" "></option>
                            <option value="Follow">Follow</option>
                            <option value="Lead">Lead</option>
                            </select>
                    </div>
                    </fieldset>
                    </form>
                    <form id="followList">
                    <fieldset>
                    <legend>Rank Follows</legend>
                    <div class="item">
                        <span>First Choice</span>
                        <select id="followRankBox0" onchange="makeList('followRankBox0','followRankBox1')">
                        <option value=" "></option>
                        <option value="Stacy">Stacy</option>
                        <option value="Alison">Alison</option>
                        <option value="Kendra">Kendra</option>
                        <option value="Lucy">Lucy</option>
                        </select>
                    </div>
                    <div class="item">
                        <span>Second Choice</span>
                        <select id="followRankBox1" onchange="makeList('followRankBox1','followRankBox2')">
                        <option value=""></option>
                        </select>
                    </div>
                    <div class="item">
                        <span>Third Choice</span>
                        <select id="followRankBox2" onchange="makeList('followRankBox2','followRankBox3')">
                        <option value=""></option>
                        </select>
                    </div>
                    <div class="item">
                        <span>Fourth Choice</span>
                        <select id="followRankBox3">
                        <option value=""></option>
                        </select>
                    </div>
                    </fieldset>
                    </form>
                    <form id="leadList">
                    <fieldset>
                    <legend>Rank Leads</legend>
                    <div class="item">
                        <span>First Choice</span>
                        <select id="leadRankBox0" onchange="makeList('leadRankBox0','leadRankBox1')">
                        <option value=" "></option>
                        <option value="Travis">Travis</option>
                        <option value="Steve">Steve</option>
                        <option value="Colin">Colin</option>
                        <option value="Albert">Albert</option>
                        </select>
                    </div>
                    <div class="item">
                        <span>Second Choice</span>
                        <select id="leadRankBox1" onchange="makeList('leadRankBox1','leadRankBox2')">
                        <option value=""></option>
                        </select>
                    </div>
                    <div class="item">
                        <span>Third Choice</span>
                        <select id="leadRankBox2" onchange="makeList('leadRankBox2','leadRankBox3')">
                        <option value=""></option>
                        </select>
                    </div>
                    <div class="item">
                        <span>Fourth Choice</span>
                        <select id="leadRankBox3">
                        <option value=""></option>
                        </select>
                    </div>
                    </fieldset>
                    </form>




                </section>
            </article>
        </section>
    </body>
</html>
